<template>
	<!-- 产品图片box -->
	<view class="goods-img" @mousedown="mousedown"  @dblclick="onDbClickHandler">
		<minMaxClose ref="minMaxClose"></minMaxClose>
		<view class="images"  v-show="!isNotData">
			<image v-if="!goodImg || goodImg.length == 0" :src="goodsImg" mode="aspectFill" ></image>
			<image v-for="(item,index) in goodImg" :key="index" :src="item" mode="aspectFill" @click="lookBigImg(item,index)"></image>
		</view>
		<view class="info-more" v-show="!isNotData">
			<view class="more-icon" @click="onInfoMore">
				<image src="../../static/images/c-more.png"></image>
			</view>
		</view>
	</view>
</template>

<script>
	import staticConst from "../../js/const/StaticConst.js";
	import minMaxClose from "../min-max-close.vue";
	import windBtnContrl from "../../js/WinBtnContrl.js";
	export default {
		components : { minMaxClose },
		props: [ "goodImg" , "goodBigImg","isNotData"],
		data() {
			return {
				goodsImg:staticConst.GOOD_IMG,
			};
		},
		methods:{
			/*** 点击查看大图 ***/
			lookBigImg(item,index)
			{
				if( !item ) return;
				this.$emit("lookBigImg",this.goodBigImg,index);
			},
			
			onInfoMore()
			{
				this.$emit("showCustmInfo");
			},
			
			onDbClickHandler()
			{
				console.log("双击！！！！");
				// alert("aa")
				this.$refs.minMaxClose.changeMax();
			},
			
			/***移动窗口***/
			mousedown()
			{
				windBtnContrl.mousedown();
			},
		},
	}
</script>

<style lang="scss">
	// 产品图片-box
	.goods-img
	{
		position: relative;
		width: 100%;
		// min-height: 110px;
		// padding-left: 10px;
		display: flex;
		align-items: center;
		justify-content: space-between;
		border-bottom: 1px solid #EEE;
		.images
		{
			display: flex;
			align-items: center;
			flex-wrap: wrap;
			padding: 20px 20px 10px 20px;
			image
			{
				margin-right: 10px;
				margin-bottom: 10px;
				width: 70px;
				height: 70px;
				border-radius: 8px;
				cursor: pointer;
			}
			
		}
		.info-more
		{
			padding-right: 30px;
			.more-icon
			{
				width: 24px;
				height: 24px;
				cursor: pointer;
				padding: 3px;
				background-color: #fff;
				image
				{
					width: 100%;
					height: 100%;
				}
			}
			
			.more-icon:hover
			{
				background-color: #EEE;
				opacity: .9;
			}
			.more-icon:active
			{
				background-color: #DDD;
				opacity: .8;
			}
		}
	}
</style>
